<template>
  <div class="ten">
    <el-form ref="form" :model="form" label-width="180px">
      <el-form-item label="博客名称" prop="blogName">
        <el-input v-model="form.blogName"></el-input>
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model="form.author"></el-input>
      </el-form-item>
      <el-form-item label="作者头像" prop="workStory">
        <el-upload
          class="avatar-uploader"
          action="/api/api/admin/file/upload"
          :headers="mingzi"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"

        >
          <img  :src="imageUrl" class="avatar" :style="{width: '150px', height: '150px', }" />

        </el-upload>
      </el-form-item>
      <el-form-item label="介绍语" prop="introImg">
        <el-input v-model="form.introduction"></el-input>
      </el-form-item>
      <el-form-item label="开启 GitHub 访问" prop="enableGithub">
        <el-switch v-model="form.enableGithub"></el-switch>
      </el-form-item>
      <!-- 通过v-if控制显示：只有enableGithub为true时才显示 -->
      <el-form-item
        label="GitHub 主页访问地址"
        prop="githubHome"
        v-if="form.enableGithub"
      >
        <el-input v-model="form.githubHome"></el-input>
      </el-form-item>
      <el-form-item label="开启 CSDN 访问" prop="enableCsdn">
        <el-switch v-model="form.enableCsdn"></el-switch>
      </el-form-item>
      <!-- CSDN访问量控制 -->
      <el-form-item
        label="CSDN 主页访问地址"
        prop="csdnHome"
        v-if="form.enableCsdn"
      >
        <el-input v-model="form.csdnHome"></el-input>
      </el-form-item>
      <el-form-item label="开启 Gitee 访问" prop="enableGitee">
        <el-switch v-model="form.enableGitee"></el-switch>
      </el-form-item>
      <!-- Gitee访问量控制 -->
      <el-form-item
        label="Gitee 主页访问地址"
        prop="giteeHome"
        v-if="form.enableGitee"
      >
        <el-input v-model="form.giteeHome"></el-input>
      </el-form-item>
      <el-form-item label="开启知乎访问" prop="enableZhihu">
        <el-switch v-model="form.enableZhihu"></el-switch>
      </el-form-item>
      <!-- 知乎访问量控制 -->
      <el-form-item
        label="知乎主页访问地址"
        prop="zhihuHome"
        v-if="form.enableZhihu"
      >
        <el-input v-model="form.zhihuHome"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        enableGithub: true,
        enableCsdn: true,
        enableGitee: true,
        enableZhihu: true,
        author: "",
        avatar: "",
        blogName: "",
        csdnHome: "",
        giteeHome: "",
        githubHome: "",
        introduction: "",
        zhihuHome: "",
      },
      fileList: [],
      tableData: {},
      imageUrl:"",
    };
  },
  created() {
    this.getList();
  },
  computed: {
    mingzi() {
      return { Authorization: localStorage.getItem("authorization") };
    },
  },
  methods: {
      handleAvatarSuccess(res) {
        this.imageUrl = res.data.url
        this.form.avatar=res.data.url
        console.log(this.imageUrl);
        
      },

    // handleChange(file, fileList) {
    //   this.fileList = fileList;
    //   // 这里可以处理图片上传后的逻辑，比如获取图片链接等
    //   // 假设这里简单模拟，将 introImg 设为一个示例链接
    //   this.form.introImg = "示例图链接";
    // },
    onSubmit() {
      console.log("提交的表单数据：", this.form);
      // 这里可以添加表单提交的逻辑，比如发送请求到后端等
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 调用提交接口
          this.$axios
            .post("/api/api/admin/blog/setting/update", this.form) // 假设后端保存接口地址
            .then((res) => {
              if (res.data.success) {
                // 假设后端返回格式包含success字段
                this.$message.success("提交成功");
              } else {
                this.$message.error(res.data.message || "提交失败");
              }
            })
            .catch((err) => {
              console.error("提交失败", err);
              this.$message.error("网络错误，提交失败");
            });
        } else {
          this.$message.warning("请完善表单信息");
          return false;
        }
      });
    },
    getList() {
      this.$axios
        .post(`/api/api/admin/blog/setting/detail`)
        .then((res) => {
          this.tableData = res.data.data;
          console.log(this.tableData, "1111");
          console.log(res);
          this.form.author = this.tableData.author;
          this.form.avatar = this.tableData.avatar;
          this.form.blogName = this.tableData.blogName;
          this.form.csdnHome = this.tableData.csdnHome;
          this.form.giteeHome = this.tableData.giteeHome;
          this.form.githubHome = this.tableData.githubHome;
          this.form.introduction = this.tableData.introduction;
          this.form.zhihuHome = this.tableData.zhihuHome;
          this.imageUrl=res.data.data.avatar
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.ten {
  background-color: white;
  padding: 8px;
}
.avatar-preview {
  margin-top: 10px;
}
.preview-img {
  width: 150px;
  height: 150px;
  object-fit: cover;

  border: 1px solid #eee;
}
</style>